<template>
  <div class="article-page">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="logo">Halo Dashboard</div>
      <el-menu mode="horizontal" background-color="#001529" text-color="#fff" active-text-color="#409EFF">
        <el-menu-item index="1">仪表盘</el-menu-item>
        <el-menu-item index="2">文章</el-menu-item>
        <el-menu-item index="3">页面</el-menu-item>
        <el-menu-item index="4">附件</el-menu-item>
        <el-menu-item index="5">评论</el-menu-item>
        <el-menu-item index="6">外观</el-menu-item>
        <el-menu-item index="7">用户</el-menu-item>
        <el-menu-item index="8">系统</el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章</el-breadcrumb-item>
        <el-breadcrumb-item>所有文章</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-input v-model="search.keyword" placeholder="关键词" style="width: 200px; margin-right: 10px;" />
        <el-select v-model="search.status" placeholder="请选择文章状态" style="width: 200px; margin-right: 10px;">
          <el-option label="公开" value="public" />
          <el-option label="私密" value="private" />
        </el-select>
        <el-select v-model="search.category" placeholder="请选择分类" style="width: 200px; margin-right: 10px;">
          <el-option label="默认分类" value="default" />
        </el-select>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>

      <!-- 写文章按钮 -->
      <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px;">写文章</el-button>

      <!-- 表格 -->
      <el-table :data="tableData" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="title" label="标题" min-width="180">
          <template #default="{ row }">
            <el-link type="primary">{{ row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <span style="color: green;">●</span> {{ row.status }}
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column prop="tags" label="标签" width="120" />
        <el-table-column prop="comments" label="评论" width="80" />
        <el-table-column prop="views" label="访问" width="80" />
        <el-table-column prop="publishTime" label="发布时间" width="180" />
        <el-table-column label="操作" width="180">
          <template #default>
            <el-link type="primary">编辑</el-link>
            <span style="margin: 0 5px;">|</span>
            <el-link type="warning">回收站</el-link>
            <span style="margin: 0 5px;">|</span>
            <el-link type="info">设置</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination background layout="prev, pager, next, sizes" :total="100" :page-size="10"
          :page-sizes="[10, 20, 50]" />
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref } from "vue";

const search = ref({
  keyword: "",
  status: "",
  category: "",
});

const tableData = ref([
  {
    title: "Halo建站结束",
    status: "私密",
    category: "默认分类",
    tags: "",
    comments: 0,
    views: 1,
    publishTime: "2021-11-06 22:14",
  },
  {
    title: "Hello Halo",
    status: "私密",
    category: "默认分类",
    tags: "",
    comments: 1,
    views: 3,
    publishTime: "2021-11-06 22:11",
  },
]);

const fetchData = () => {
  console.log("查询数据", search.value);
};

const resetSearch = () => {
  search.value = { keyword: "", status: "", category: "" };
};
</script>

<style scoped>
.article-page {
  background: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  background: #001529;
  color: #fff;
  height: 60px;
}

.logo {
  font-weight: bold;
  color: #fff;
  margin-right: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 15px 0;
}
</style>
